<template>
  <div class="batch-visit-plan-create">
    <el-card :body-style="{ padding: '20px' }">
      <template #header>
        <div class="card-header">
          <span>批量创建走访计划</span>
        </div>
      </template>

      <!-- 创建方式选择 -->
      <div class="form-section">
        <el-steps :active="activeTab" simple>
          <el-step title="选择创建方式" />
          <el-step title="填写计划信息" />
          <el-step title="确认并创建" />
        </el-steps>
      </div>

      <!-- 方式一：批量选择客户 -->
      <div v-if="activeTab === 0" class="form-section">
        <h3 class="section-title">选择批量创建方式</h3>
        <div class="method-selection">
          <el-card class="method-card" @click="selectMethod(1)">
            <div class="method-icon">
              <el-icon class="icon-large"><UserFilled /></el-icon>
            </div>
            <div class="method-content">
              <h4>批量选择客户</h4>
              <p>设定走访计划和目标后，批量选择客户进行创建</p>
            </div>
          </el-card>
          
          <el-card class="method-card" @click="selectMethod(2)">
            <div class="method-icon">
              <el-icon class="icon-large"><Download /></el-icon>
            </div>
            <div class="method-content">
              <h4>导入Excel文件</h4>
              <p>下载Excel模板，填写后导入创建</p>
            </div>
          </el-card>
        </div>
      </div>

      <!-- 方式一详情：填写计划信息并选择客户 -->
      <div v-if="activeTab === 1 && selectedMethod === 1" class="form-section">
        <el-form ref="batchPlanFormRef" :model="batchPlanForm" :rules="rules" label-width="120px">
          <!-- 走访计划基本信息 -->
          <div class="form-subsection">
            <h3 class="subsection-title">计划基本信息</h3>
            
            <el-form-item label="计划名称" prop="planName">
              <el-input v-model="batchPlanForm.planName" placeholder="请输入计划名称"></el-input>
            </el-form-item>
            
            <el-form-item label="开始时间" prop="startTime">
              <el-date-picker
                v-model="batchPlanForm.startTime"
                type="datetime"
                placeholder="选择开始时间"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
            
            <el-form-item label="结束时间" prop="endTime">
              <el-date-picker
                v-model="batchPlanForm.endTime"
                type="datetime"
                placeholder="选择结束时间"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
            
            <el-form-item label="客户经理" prop="manager">
              <el-input v-model="batchPlanForm.manager" placeholder="请输入客户经理姓名"></el-input>
            </el-form-item>
            
            <el-form-item label="备注">
              <el-input v-model="batchPlanForm.remark" type="textarea" placeholder="请输入备注信息"></el-input>
            </el-form-item>
          </div>

          <!-- 走访目标信息 -->
          <div class="form-subsection">
            <div class="subsection-header">
              <h3 class="subsection-title">走访目标</h3>
            </div>
            
            <div class="target-item">
              <el-form-item prop="selectedTargets" :rules="targetRules.selectedTargets">
                <div class="tags-container">
                  <!-- 预设标签 -->
                  <span 
                    v-for="presetTarget in presetTargets"
                    :key="presetTarget.value"
                    :class="['tag-item', { 'selected': batchPlanForm.selectedTargets.includes(presetTarget.value) }]"
                    @click="toggleTargetSelection(presetTarget.value)"
                  >
                    {{ presetTarget.label }}
                  </span>
                </div>
              </el-form-item>

              <el-form-item label="自定义目标">
                <el-input 
                  v-model="batchPlanForm.customTargetInput"
                  placeholder="输入自定义走访目标，按回车添加"
                  @keyup.enter="addCustomTarget"
                  clearable
                ></el-input>
                
                <!-- 显示已添加的自定义目标 -->
                <div v-if="batchPlanForm.customTargets.length > 0" class="custom-tags-container">
                  <span 
                    v-for="(customTarget, index) in batchPlanForm.customTargets"
                    :key="index"
                    class="tag-item custom-tag"
                  >
                    {{ customTarget }}
                    <i class="el-icon-close" @click="removeCustomTarget(index)"></i>
                  </span>
                </div>
              </el-form-item>

              <el-form-item label="准备事项">
                <div class="tags-container">
                  <!-- 预设标签 -->
                  <span 
                    v-for="presetPreparation in presetPreparations"
                    :key="presetPreparation.value"
                    :class="['tag-item', { 'selected': batchPlanForm.selectedPreparations.includes(presetPreparation.value) }]"
                    @click="togglePreparationSelection(presetPreparation.value)"
                  >
                    {{ presetPreparation.label }}
                  </span>
                </div>
              </el-form-item>

              <el-form-item label="自定义准备事项">
                <el-input 
                  v-model="batchPlanForm.customPreparationInput"
                  placeholder="输入自定义准备事项，按回车添加"
                  @keyup.enter="addCustomPreparation"
                  clearable
                ></el-input>
                
                <!-- 显示已添加的自定义准备事项 -->
                <div v-if="batchPlanForm.customPreparations.length > 0" class="custom-tags-container">
                  <span 
                    v-for="(customPreparation, index) in batchPlanForm.customPreparations"
                    :key="index"
                    class="tag-item custom-tag"
                  >
                    {{ customPreparation }}
                    <i class="el-icon-close" @click="removeCustomPreparation(index)"></i>
                  </span>
                </div>
              </el-form-item>
            </div>
          </div>

          <!-- 选择客户 -->
          <div class="form-subsection">
            <div class="subsection-header">
              <h3 class="subsection-title">选择客户</h3>
              <el-button type="primary" size="small" @click="openCustomerSelectModal">选择客户</el-button>
            </div>
            
            <div v-if="selectedCustomers.length > 0" class="selected-customers">
              <div class="customer-info-item" v-for="customer in selectedCustomers" :key="customer.id">
                <div class="customer-info">
                  <span class="customer-name">{{ customer.customerName }}</span>
                  <span class="customer-id">{{ customer.id }}</span>
                </div>
                <el-button type="text" size="small" @click="removeCustomer(customer.id)">
                  <i class="el-icon-delete"></i>
                </el-button>
              </div>
            </div>
            
            <div v-else class="no-customers">
              <el-empty description="请选择要创建走访计划的客户"></el-empty>
            </div>
          </div>
        </el-form>
      </div>

      <!-- 方式二详情：Excel导入 -->
      <div v-if="activeTab === 1 && selectedMethod === 2" class="form-section">
        <div class="import-section">
          <h3 class="section-title">导入Excel创建计划</h3>
          
          <div class="import-steps">
            <div class="step-item">
              <div class="step-number">1</div>
              <div class="step-content">
                <h4>下载模板</h4>
                <p>下载标准的走访计划Excel模板</p>
                <el-button type="primary" @click="downloadTemplate">
                  <el-icon><Download /></el-icon>
                  下载模板
                </el-button>
              </div>
            </div>
            
            <div class="step-item">
              <div class="step-number">2</div>
              <div class="step-content">
                <h4>填写数据</h4>
                <p>按照模板要求填写走访计划相关信息</p>
                <el-alert title="注意事项" type="warning" :closable="false">
                  <ul>
                    <li>请严格按照模板格式填写数据</li>
                    <li>客户ID为必填项，请确保客户ID存在</li>
                    <li>日期格式为：YYYY-MM-DD HH:mm:ss</li>
                  </ul>
                </el-alert>
              </div>
            </div>
            
            <div class="step-item">
              <div class="step-number">3</div>
              <div class="step-content">
                <h4>上传文件</h4>
                <p>上传填写完成的Excel文件</p>
                <el-upload
                  ref="uploadRef"
                  class="upload-demo"
                  :headers="uploadHeaders"
                  :action="uploadUrl"
                  :on-success="handleUploadSuccess"
                  :on-error="handleUploadError"
                  :file-list="fileList"
                  :before-upload="beforeUpload"
                  :show-file-list="true"
                  accept=".xlsx,.xls"
                >
                  <el-button type="primary">
                    <el-icon><Upload /></el-icon>
                    点击上传
                  </el-button>
                  <template #tip>
                    <div class="el-upload__tip">
                      只能上传xlsx/xls文件，且不超过10MB
                    </div>
                  </template>
                </el-upload>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 确认并创建 -->
      <div v-if="activeTab === 2" class="form-section">
        <h3 class="section-title">确认创建信息</h3>
        
        <div v-if="selectedMethod === 1" class="confirmation-info">
          <div class="info-item">
            <label>计划名称:</label>
            <span>{{ batchPlanForm.planName }}</span>
          </div>
          <div class="info-item">
            <label>开始时间:</label>
            <span>{{ batchPlanForm.startTime }}</span>
          </div>
          <div class="info-item">
            <label>结束时间:</label>
            <span>{{ batchPlanForm.endTime }}</span>
          </div>
          <div class="info-item">
            <label>客户经理:</label>
            <span>{{ batchPlanForm.manager }}</span>
          </div>
          <div class="info-item">
            <label>走访目标:</label>
            <span>{{ formattedTargets }}</span>
          </div>
          <div class="info-item">
            <label>准备事项:</label>
            <span>{{ formattedPreparations }}</span>
          </div>
          <div class="info-item">
            <label>批量创建数量:</label>
            <span>{{ selectedCustomers.length }}个客户</span>
          </div>
        </div>
        
        <div v-else-if="selectedMethod === 2" class="confirmation-info">
          <div class="info-item">
            <label>导入文件:</label>
            <span>{{ uploadedFileName || '未上传文件' }}</span>
          </div>
          <div class="info-item">
            <label>预计创建数量:</label>
            <span>{{ estimatedCount || '0' }}个计划</span>
          </div>
        </div>
        
        <div class="confirmation-actions">
          <el-button @click="prevStep">上一步</el-button>
          <el-button type="primary" @click="submitBatchCreate" :loading="submitting">
            {{ submitting ? '创建中...' : '确认创建' }}
          </el-button>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div v-if="activeTab === 1" class="form-actions">
        <el-button @click="prevStep">上一步</el-button>
        <el-button type="primary" @click="nextStep" :disabled="!canProceed">
          下一步
        </el-button>
      </div>
    </el-card>

    <!-- 客户选择模态框 -->
    <el-dialog title="选择客户" v-model="showCustomerModal" width="800px">
      <el-input 
                  placeholder="请输入客户名称搜索" 
                  v-model="customerSearchKeyword"
                  class="search-input"
                  clearable
                >
                  <template #prefix>
                    <el-icon><Search /></el-icon>
                  </template>
                </el-input>
      
      <el-table 
        :data="filteredCustomers" 
        style="width: 100%"
        height="400"
        border
        ref="dialogTable"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="客户ID" width="100"></el-table-column>
        <el-table-column prop="customerName" label="客户名称" width="180"></el-table-column>
        <el-table-column prop="contactPerson" label="联系人"></el-table-column>
        <el-table-column prop="contactPhone" label="联系电话"></el-table-column>
        <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
      </el-table>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showCustomerModal = false">取消</el-button>
          <el-button type="primary" @click="confirmCustomerSelection">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { UserFilled, Download, Upload, Search } from '@element-plus/icons-vue'
import type { ElForm, UploadFile, UploadRawFile } from 'element-plus'

// 定义类型接口
interface Customer {
  id: string
  customerName: string
  contactPerson: string
  contactPhone: string
  address: string
}

interface PresetItem {
  label: string
  value: string
}

interface BatchPlanForm {
  planName: string
  startTime: string
  endTime: string
  manager: string
  remark: string
  selectedTargets: string[]
  customTargetInput: string
  customTargets: string[]
  selectedPreparations: string[]
  customPreparationInput: string
  customPreparations: string[]
}

// 步骤相关
const activeTab = ref(0)
const selectedMethod = ref<number | null>(null)
const submitting = ref(false)

// 表单数据
const batchPlanForm = reactive<BatchPlanForm>({
  planName: '',
  startTime: '',
  endTime: '',
  manager: '',
  remark: '',
  selectedTargets: [],
  customTargetInput: '',
  customTargets: [],
  selectedPreparations: [],
  customPreparationInput: '',
  customPreparations: []
})

// 预设的走访目标标签
const presetTargets = ref<PresetItem[]>([
  { label: '产品推荐', value: 'product_recommendation' },
  { label: '关键人收集', value: 'key_person_collection' }
])

// 预设的准备事项标签
const presetPreparations = ref<PresetItem[]>([
  { label: '准备产品资料', value: 'prepare_product_materials' },
  { label: '准备合同', value: 'prepare_contract' },
  { label: '准备演示设备', value: 'prepare_demo_equipment' },
  { label: '准备名片', value: 'prepare_business_cards' },
  { label: '预约会议室', value: 'book_meeting_room' },
  { label: '准备样品', value: 'prepare_samples' }
])

// 表单验证规则
const rules = {
  planName: [
    { required: true, message: '请输入计划名称', trigger: 'blur' },
    { min: 2, max: 100, message: '长度在 2 到 100 个字符', trigger: 'blur' }
  ],
  startTime: [
    { required: true, message: '请选择开始时间', trigger: 'change' }
  ],
  endTime: [
    { required: true, message: '请选择结束时间', trigger: 'change' }
  ],
  manager: [
    { required: true, message: '请输入客户经理姓名', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ]
}

// 目标验证规则
const targetRules = {
  selectedTargets: [
    { required: true, message: '请至少选择一个走访目标', trigger: 'change' }
  ]
}

// 客户选择相关
const showCustomerModal = ref(false)
const customers = ref<Customer[]>([
  // 模拟数据 - 实际项目中应该从API获取
  { id: '1001', customerName: '江苏科技有限公司', contactPerson: '张三', contactPhone: '13800138001', address: '南京市玄武区中山路1号' },
  { id: '1002', customerName: '苏州电子科技集团', contactPerson: '李四', contactPhone: '13800138002', address: '苏州市工业园区金鸡湖大道100号' },
  { id: '1003', customerName: '南京网络科技有限公司', contactPerson: '王五', contactPhone: '13800138003', address: '南京市秦淮区夫子庙100号' },
  { id: '1004', customerName: '无锡通信设备有限公司', contactPerson: '赵六', contactPhone: '13800138004', address: '无锡市梁溪区太湖大道1号' },
  { id: '1005', customerName: '常州信息技术有限公司', contactPerson: '孙七', contactPhone: '13800138005', address: '常州市天宁区和平路1号' }
])
const customerSearchKeyword = ref('')
const selectedCustomers = ref<Customer[]>([])

// 导入相关
const uploadUrl = '/api/visit-plans/batch/upload'
const uploadHeaders = ref({})
const fileList = ref<UploadFile[]>([])
const uploadedFileName = ref('')
const estimatedCount = ref(0)

// 表单引用
const batchPlanFormRef = ref<InstanceType<typeof ElForm>>()
const uploadRef = ref()
const dialogTable = ref()

// 过滤后的客户列表
const filteredCustomers = computed(() => {
  if (!customerSearchKeyword.value) {
    return customers.value
  }
  return customers.value.filter(customer => 
    customer.customerName.includes(customerSearchKeyword.value) ||
    customer.contactPerson.includes(customerSearchKeyword.value)
  )
})

// 格式化的走访目标文本
const formattedTargets = computed(() => {
  const targets: string[] = []
  
  // 添加预设目标
  batchPlanForm.selectedTargets.forEach(targetValue => {
    const presetTarget = presetTargets.value.find(t => t.value === targetValue)
    if (presetTarget) {
      targets.push(presetTarget.label)
    }
  })
  
  // 添加自定义目标
  if (batchPlanForm.customTargets && batchPlanForm.customTargets.length > 0) {
    targets.push(...batchPlanForm.customTargets)
  }
  
  return targets.join('、')
})

// 格式化的准备事项文本
const formattedPreparations = computed(() => {
  const preparations: string[] = []
  
  // 添加预设准备事项
  batchPlanForm.selectedPreparations.forEach(prepValue => {
    const presetPrep = presetPreparations.value.find(p => p.value === prepValue)
    if (presetPrep) {
      preparations.push(presetPrep.label)
    }
  })
  
  // 添加自定义准备事项
  if (batchPlanForm.customPreparations && batchPlanForm.customPreparations.length > 0) {
    preparations.push(...batchPlanForm.customPreparations)
  }
  
  return preparations.join('、')
})

// 是否可以进行下一步
const canProceed = computed(() => {
  if (selectedMethod.value === 1) {
    return selectedCustomers.value.length > 0 && 
           batchPlanForm.planName && 
           batchPlanForm.startTime && 
           batchPlanForm.endTime && 
           batchPlanForm.manager && 
           batchPlanForm.selectedTargets.length > 0
  } else if (selectedMethod.value === 2) {
    return uploadedFileName.value !== ''
  }
  return false
})

// 选择创建方式
const selectMethod = (method: number) => {
  selectedMethod.value = method
  activeTab.value = 1
}

// 上一步
const prevStep = () => {
  if (activeTab.value > 0) {
    activeTab.value--
  }
}

// 下一步
const nextStep = () => {
  if (activeTab.value === 1 && selectedMethod.value === 1) {
    // 验证表单
    batchPlanFormRef.value?.validate(valid => {
      if (valid && canProceed.value) {
        activeTab.value++
      }
    })
  } else if (activeTab.value < 2 && canProceed.value) {
    activeTab.value++
  }
}

// 切换走访目标标签的选中状态
const toggleTargetSelection = (targetValue: string) => {
  const index = batchPlanForm.selectedTargets.indexOf(targetValue)
  if (index > -1) {
    batchPlanForm.selectedTargets.splice(index, 1)
  } else {
    batchPlanForm.selectedTargets.push(targetValue)
  }
}

// 切换准备事项标签的选中状态
const togglePreparationSelection = (preparationValue: string) => {
  const index = batchPlanForm.selectedPreparations.indexOf(preparationValue)
  if (index > -1) {
    batchPlanForm.selectedPreparations.splice(index, 1)
  } else {
    batchPlanForm.selectedPreparations.push(preparationValue)
  }
}

// 添加自定义目标
const addCustomTarget = () => {
  if (batchPlanForm.customTargetInput && 
      !batchPlanForm.customTargets.includes(batchPlanForm.customTargetInput)) {
    batchPlanForm.customTargets.push(batchPlanForm.customTargetInput)
    batchPlanForm.customTargetInput = ''
  }
}

// 移除自定义目标
const removeCustomTarget = (index: number) => {
  batchPlanForm.customTargets.splice(index, 1)
}

// 添加自定义准备事项
const addCustomPreparation = () => {
  if (batchPlanForm.customPreparationInput && 
      !batchPlanForm.customPreparations.includes(batchPlanForm.customPreparationInput)) {
    batchPlanForm.customPreparations.push(batchPlanForm.customPreparationInput)
    batchPlanForm.customPreparationInput = ''
  }
}

// 移除自定义准备事项
const removeCustomPreparation = (index: number) => {
  batchPlanForm.customPreparations.splice(index, 1)
}

// 打开客户选择模态框
const openCustomerSelectModal = () => {
  showCustomerModal.value = true
}

// 确认客户选择
const confirmCustomerSelection = () => {
  const selectedRows = dialogTable.value?.getSelection() || []
  // 去重，避免重复添加
  selectedRows.forEach((customer: Customer) => {
    if (!selectedCustomers.value.find(c => c.id === customer.id)) {
      selectedCustomers.value.push(customer)
    }
  })
  showCustomerModal.value = false
}

// 移除已选客户
const removeCustomer = (id: string) => {
  const index = selectedCustomers.value.findIndex(customer => customer.id === id)
  if (index > -1) {
    selectedCustomers.value.splice(index, 1)
  }
}

// 下载模板
const downloadTemplate = () => {
  // 模拟下载 - 实际项目中应该调用API下载模板
  ElMessage.success('模板下载成功')
  console.log('下载模板')
  // 实际项目中的下载代码可能如下：
  // window.open('/api/visit-plans/batch/template', '_blank')
}

// 处理文件上传前的校验
const beforeUpload = (file: UploadRawFile) => {
  const isExcel = file.name.endsWith('.xlsx') || file.name.endsWith('.xls')
  if (!isExcel) {
    ElMessage.error('只能上传Excel文件')
    return false
  }
  const isLt10M = file.size / 1024 / 1024 < 10
  if (!isLt10M) {
    ElMessage.error('文件大小不能超过10MB')
    return false
  }
  return true
}

// 处理文件上传成功
const handleUploadSuccess = (response: any) => {
  if (response && response.code === 200) {
    uploadedFileName.value = fileList.value[0].name
    estimatedCount.value = response.data?.estimatedCount || 0
    ElMessage.success('文件上传成功')
  } else {
    ElMessage.error('文件上传失败：' + (response?.message || '未知错误'))
  }
}

// 处理文件上传失败
const handleUploadError = (error: any) => {
  ElMessage.error('文件上传失败：' + error.message)
}

// 提交批量创建
const submitBatchCreate = () => {
  submitting.value = true
  
  if (selectedMethod.value === 1) {
    // 模拟API调用
    setTimeout(() => {
      submitting.value = false
      ElMessage.success(`成功创建${selectedCustomers.value.length}个走访计划`)
      resetForm()
    }, 1500)
  } else if (selectedMethod.value === 2) {
    // 模拟API调用
    setTimeout(() => {
      submitting.value = false
      ElMessage.success(`成功导入创建${estimatedCount.value}个走访计划`)
      resetForm()
    }, 1500)
  }
}

// 重置表单
const resetForm = () => {
  activeTab.value = 0
  selectedMethod.value = null
  selectedCustomers.value = []
  fileList.value = []
  uploadedFileName.value = ''
  estimatedCount.value = 0
  
  // 重置表单数据
  Object.assign(batchPlanForm, {
    planName: '',
    startTime: '',
    endTime: '',
    manager: '',
    remark: '',
    selectedTargets: [],
    customTargetInput: '',
    customTargets: [],
    selectedPreparations: [],
    customPreparationInput: '',
    customPreparations: []
  })
  
  if (batchPlanFormRef.value) {
    batchPlanFormRef.value.resetFields()
  }
}
</script>

<style scoped>
.batch-visit-plan-create {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-section {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 15px;
}

.method-selection {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.method-card {
  cursor: pointer;
  transition: all 0.3s ease;
}

.method-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.method-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin: 0 auto 15px;
  background-color: #ecf5ff;
  border-radius: 50%;
  color: #409eff;
}

.icon-large {
  font-size: 40px;
}

.method-content {
  text-align: center;
}

.method-content h4 {
  margin: 0 0 10px;
  font-size: 16px;
  color: #303133;
}

.method-content p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.form-subsection {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #ffffff;
  border-radius: 4px;
}

.subsection-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.subsection-title {
  font-size: 14px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 15px;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.tag-item {
  display: inline-block;
  padding: 6px 12px;
  background-color: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tag-item:hover {
  border-color: #409eff;
}

.tag-item.selected {
  background-color: #ecf5ff;
  border-color: #409eff;
  color: #409eff;
}

.custom-tag {
  background-color: #f0f9ff;
  border-color: #36cfc9;
  color: #36cfc9;
}

.custom-tag:hover {
  background-color: #e6fffb;
}

.custom-tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.tag-item .el-icon-close {
  margin-left: 4px;
  font-size: 10px;
  cursor: pointer;
}

.selected-customers {
  max-height: 300px;
  overflow-y: auto;
  margin-top: 10px;
}

.customer-info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
}

.customer-info {
  display: flex;
  flex-direction: column;
}

.customer-name {
  font-weight: bold;
  color: #303133;
}

.customer-id {
  color: #909399;
  font-size: 12px;
}

.no-customers {
  text-align: center;
  padding: 20px;
}

.import-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.step-item {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}

.step-number {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #409eff;
  color: white;
  border-radius: 50%;
  font-weight: bold;
  flex-shrink: 0;
}

.step-content {
  flex: 1;
}

.step-content h4 {
  margin: 0 0 5px;
  font-size: 14px;
  color: #303133;
}

.step-content p {
  margin: 0 0 10px;
  color: #909399;
  font-size: 12px;
}

.confirmation-info {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.info-item label {
  color: #909399;
  font-weight: bold;
}

.info-item span {
  color: #303133;
}

.confirmation-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.search-input {
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .batch-visit-plan-create {
    padding: 10px;
  }
  
  .form-section {
    padding: 15px;
  }
  
  .method-selection {
    grid-template-columns: 1fr;
  }
  
  .tags-container, .custom-tags-container {
    gap: 8px;
    padding: 8px;
  }
  
  .step-item {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>